<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/common.jsp"%>
<%@ include file="/WEB-INF/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>注册页面</title>
<script type="text/javascript">
	function changeImg() {
		$("#myImg").attr("src", ctx+"/validateCodeServlet?"+new Date().getTime());
	}
	
	
	function genTimestamp() {
		var time = new Date();
		return time.getTime();
	}
	
	$(function(){
		changeImg();
		$("#myImg").bind("click", changeImg);
		
	});

  	function validataForm(){
	  	if ($("#userName").val() == "") {
			$("#userName").tips({
				side : 2,
				msg : '用户名不得为空',
				bg : '#AE81FF',
				time : 3
			});
	
			$("#userName").focus();
			return false;
		} else {
			$("#userName").val(jQuery.trim($('#userName').val()));
		}
    
	  	if ($("#password").val() == "") {
			
			$("#password").tips({
				side : 2,
				msg : '密码不得为空',
				bg : '#AE81FF',
				time : 3
			});
	
			$("#password").focus();
			return false;
		}
	  	
	  	var password = $("#password").val();
	    var repassword = $("#repassword").val();
	    if(repassword==""){
	    	$("#repassword").tips({
				side : 2,
				msg : '确认密码不得为空',
				bg : '#AE81FF',
				time : 3
			});
	
			$("#repassword").focus();
			return false;
	    }else if(password != repassword){
	        $("#repassword").tips({
				side : 2,
				msg : '两次密码不一致',
				bg : '#AE81FF',
				time : 3
			});
	
			$("#repassword").focus();
	        return false;
	    }
	  	
		if ($("#checkcode").val() == "") {
	
			$("#checkcode").tips({
				side : 1,
				msg : '验证码不得为空',
				bg : '#AE81FF',
				time : 3
			});
	
			$("#checkcode").focus();
			return false;
		}
		
		var email=$("#email").val();
		var reg =/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
        //对电子邮件的验证
        if(email==""){
        	$("#email").tips({
				side : 1,
				msg : '邮箱地址不得为空',
				bg : '#AE81FF',
				time : 3
			});
	
			$("#email").focus();
			return false;
        }else if(!reg.test(email)){
	        $("#email").tips({
				side : 1,
				msg : '邮箱地址非法',
				bg : '#AE81FF',
				time : 3
			});
	
			$("#email").focus();
			return false;
	    }
        return true;
  	}
  	
  	function register(){
  		if(validataForm()){
  		    var userName=$("#userName").val();
		    var password=$("#password").val();
		    var repassword=$("#repassword").val();
		    var email=$("#email").val();
		    var checkcode=$("#checkcode").val();
			$.post(ctx+"/registerSave.do", { userName: userName,password:password,repassword:repassword,email:email,checkcode:checkcode},function(data){
				var data = eval('(' + data + ')');
				if("success" == data.result){
					window.location.href=ctx+"/message.do";
				}else if("faile" == data.result){
					var key  = data.key;
					var info = data.info;
					$("#"+key).tips({
						side : 1,
						msg : info,
						bg : '#FF5080',
						time : 15
					});
					$("#"+key).focus();
				}
			});
  		}
  	}
</script>
</head>
<body>
<br></br>
<br></br>
<body style='overflow:scroll;overflow-x:hidden'>
	<div class="container">
		<div class="row">
			<div class="panel panel-default">
				<div class="panel-heading" style="text-align:center;"><h3>注册</h3></div>
				<div class="panel-body">
				<form action="${ctx}/registerSave.do"  onsubmit="return validataForm();"   method="post" class="form-horizontal" role="form">
					<div class="form-group">
					    <label for="userName" class="col-sm-3 control-label"><font color="red">*</font>用户名：</label>
					    <div class="col-sm-8">
					       <input type="text" class="form-control" id="userName"  name="userName" placeholder="请输入用户名">
					    </div>
					 </div>
					 
					 <div class="form-group">
					    <label for="passoword" class="col-sm-3 control-label"><font color="red">*</font>密码：</label>
					    <div class="col-sm-8">
					       <input type="password" class="form-control" id="password"  name="password" placeholder="请输入密码">
					    </div>
					 </div>
					 
					 <div class="form-group">
					    <label for="repassword" class="col-sm-3 control-label"><font color="red">*</font>确认密码：</label>
					    <div class="col-sm-8">
					       <input type="password" class="form-control" id="repassword"  name="repassword" placeholder="请输入确认密码">
					    </div>
					 </div>
					   
				   	 <div class="form-group">
				    	<label for="email" class="col-sm-3 control-label">邮箱：</label>
					    <div class="col-sm-8">
					       <input type="text" class="form-control" id="email"  name="email" placeholder="请输入邮箱">
					    </div>
				     </div>
					   
					 <div class="form-group">
					    <label for="checkcode" class="col-sm-3 control-label"><font color="red">*</font>验证码：</label>
					    <div class="col-sm-6">
					       <input type="text" class="form-control" id="checkcode"  name="checkcode" placeholder="请输入验证码">
					    </div>
					    <div class="col-sm-2">
					    	 <img onclick="changeImg();" style="cursor: pointer;" id="myImg">
					    </div>
					  </div>
					    
					  <div class="form-group" style="text-align:center;">
					      <div class="col-sm-offset-1 col-sm-11">
					         <a  class="btn btn-default btn-primary"  onclick="register();">注册</a>
					      	 <a  class="btn btn-default"  href="${ctx}/login.do" >返回登陆</a>
					      </div>
			   		  </div>
  				</form>
  				</div>
				</div>
			</div>
		</div>
</body>
</html>